<template>
	<view class="center">
		<view class="myorder">
			
			<view class="content" v-for="(item,index) in houseList">
				<view class="con">
					<navigator :url="'../discover/houseDetail?house_id='+item.house_id" >
					<view class="person-info">
						<image class="avatar" :src="siteUrl+item.avatar"></image>
						<view class="name">{{item.nickname}}</view>												
					</view>
					<view class="house-info">
						<image v-if="item.image" class="left" :src="siteUrl+item.image"></image>
						<image v-else class="left" :src="siteUrl+item.images.split(',',1)"></image>
						
			
						
						<view class="right">
							<view class="title">{{item.title}}</view>
							<view class="location">{{item.location_near}}</view>
							<view class="price"><font style="font-size:40rpx;color:#FF635C">{{item.price}}</font>元/月</view>
						</view>
					</view>
					</navigator>
					<image class="line" src="/static/img/order-line.png"></image>
					<view class="contact-info">
						<view class="time">预约时间:{{item.ordertime}}</view>
						<view class="daohang com" @click="open(item.lon,item.lat,item.location_near,item.location_map)">导航</view>
						<view class="contact com" @click="tel(item.mobile)">联系他</view>
					</view>
				</view>
			</view>
			<uni-load-more  :loadingType="loadingType" :contentText="contentText" :status="status"></uni-load-more>					
			
			
					
		</view>
	</view>
</template>

<script>
	var _self,
	page = 1,
	timer = null;
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
		    uniLoadMore
		},
		data() {
			return {
				title: 'Hello',
				houseList:[],
				siteUrl:this.websiteUrl,
				status: 'more',
				loadingText: '加载中...',
				loadingType: 2,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
				    contentdown:'上拉显示更多',
				    contentrefresh: '正在加载...',
				    contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			_self = this
			this.gethouseList()

		},
		getmorenews: function() {
			if(_self.status !== 'more'){
				return false
			}						    
			_self.status = 'loading'
		    uni.showNavigationBarLoading();//显示加载动画
		    uni.request({
		        url:this.websiteUrl+'/userapi.php/order/orderList?page='+page,
		        method: 'POST',
				data: {token:uni.getStorageSync('token')},				
		        success: function(res) {			           																		
		            if (res.data.data.data.length == 0) {//没有数据			                
						_self.status = 'noMore'						
		                uni.hideNavigationBarLoading();//关闭加载动画							
		                return false;
		            }
		            page++;//每触底一次 page +1										
		            _self.houseList = _self.houseList.concat(res.data.data.data);//将数据拼接在一起			            
					_self.status = 'more'					
		            uni.hideNavigationBarLoading();//关闭加载动画
		        }
		    });
		},	
		onPullDownRefresh: function() {
			//下拉刷新的时候请求一次数据
			
		    this.gethouseList()					
		},
		onReachBottom: function() {
			//触底的时候请求数据，即为上拉加载更多
			//为了更加清楚的看到效果，添加了定时器
		    if (timer != null) {
		        clearTimeout(timer);
		    }		   
			 _self.getmorenews();
		},
		methods: {
			open($lon,$lat,$location_near,$location_map){
				//console.log(e)
				//var value = e.target.value
				uni.openLocation({
				longitude: Number($lon),
					latitude: Number($lat),
					name: $location_near,
					address: $location_map
				})
			},
			
			
			
			
			
			gethouseList(){
				page = 1;
				_self.status = 'more'
				uni.showNavigationBarLoading();	
				uni.request({
					url: this.websiteUrl+'/userapi.php/order/orderList?page=1',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'				  
					},
					data: {token:uni.getStorageSync('token')},
					success: res => {												
						if(res.data.code == 1){			
							page++
							_self.houseList = res.data.data.data
						
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新							
						}												
					},
					fail: () => {},
					complete: () => {}
				});
			},
			tel($mobile){
				uni.makePhoneCall({
					phoneNumber:$mobile
				})
			}
		}
	}
</script>

<style>
    .center {
		
	display: flex;
	flex-direction: column;
	align-items: center;
	height:100%;
	width:100%;
	}
	
	
	.myorder{
		width:100%;
		height: 1260rpx;
		background:#E5E5E5;	
		
	}
	
	.myorder .content{
		width:100%;
		height:440rpx;
		margin-bottom:20rpx;
		background:white;
		
		
	}
	
	
	.myorder .content .con{
		width:91.5%;
		margin-left:4.25%;
		height:440rpx;
	}
	
	.con .person-info{
		width:100%;
		height:40rpx;
		padding-top:32rpx;
	}
	
	.con .person-info .avatar{
		width:40rpx;
		height: 40rpx;
		float:left;
	}
	
	.con .person-info .name{
		width:auto;
		height: 40rpx;
		line-height: 40rpx;
		margin-left:20rpx;
		font-size:26rpx;
		color:#373737;
		float:left;
	}
	
	
	
	
	.con .house-info{
		width:100%;
		height:200rpx;
		margin-top:34rpx;
	}
	
	.con .house-info .left{
		width:240rpx;
		height: 200rpx;
		float:left;
	}
	
	.con .house-info .right{
		width: 422rpx;
		height: 200rpx;
		margin-left:24rpx;
		float:left;
	}
	
	.con .house-info .right .title{
		
	
		line-height:42rpx;
		font-size:30rpx;
		color:#373737;
		
	}
	
	.con .house-info .right .location{
		
		line-height:34rpx ;
		font-size:24rpx;
		color:#999999;
		margin-top:12rpx;
	
	}
	
	.con .house-info .right .price{
		font-size:32rpx;
		line-height:48rpx;
		margin-top:12rpx;
		
	}
	
	
	.con .line{
		width:100%;
		margin-top:32rpx;
		margin-bottom:21rpx;
		height: 2rpx;
	}
	
	.con .contact-info{
		width:100%;
		height:60rpx;
		position:relative;
	}
	
	.contact-info .time{
		width:326rpx;
		height: 60rpx;
		font-size:24rpx;
		line-height: 60rpx;
		color:#666667;
		float:left;
		
	}
	
	.contact-info .daohang{
		
		right:176rpx;
		
	}
	
	.contact-info .contact{
	
		right:0rpx;
	}
	
	.contact-info .com{
		width:124rpx;
		height:60rpx;
		line-height:60rpx ;
		color:#9B9B9B;
		border-radius:40rpx;
		text-align:center;
		float:left;
		font-size:24rpx;
		border: 4rpx #999999 solid;
		position:absolute;
	}
	
	
	
	
	
	
	
	
</style>
